ZoneModal.tsx ➔ ZoneModal - Code Metrics - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

ZoneModal.tsx ➔ ZoneModal B
last analyzed 2023-01-12 17:40 UTC

↳ Parent: components/modals/ZoneModal.tsx

Complexity

Conditions

Size

Total Lines	68
Code Lines	51

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	51
dl	0
loc	68
rs	8.1369
c	0
b	0
f	0
cc	5

How to fix Long Method

import React from "react";
import { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
import GestureRecognizer from 'react-native-swipe-gestures';

export default function ZoneModal({navigation, zone, zoneModalVisible, setZoneModalVisible, currentCity}) {
    const [zoneType, setZoneType] = useState(null);
    const [taxRates, setTaxRates] = useState(null);
    const [zoneText, setZoneText] = useState(null);



    useEffect(() => {
        function getZoneData() {
            if (zone) {
                setZoneType(zone['zoneType'])
                setTaxRates(currentCity['taxRates'])

                if (taxRates) {
                    if (taxRates[`${zoneType}Rate`] > 0) {
                        setZoneText(`Parking here will cost ${taxRates[`${zoneType}Rate`]}kr`)
                    } else {
                        setZoneText(`Park here to reduce ${taxRates[`${zoneType}Rate`]}kr from your trip`)
                    }
                }
                
            }
        }
        getZoneData();
    });


    
    return (
        <GestureRecognizer
            style={{flex: 1}}
            onSwipeDown={ () => setZoneModalVisible(false) }
        >
        <Modal
        animationType="slide"
        transparent={true}
        visible={zoneModalVisible}
        onRequestClose={() => {
            setZoneModalVisible(!zoneModalVisible)
        }}

        >
            <View style={styles.modalContainer}></View>


            <View style={styles.modalMessage}>
            <View style={styles.swipeButton}></View>

                <View style={styles.titleContainer}>
                    <View style={styles.textContainer}>
                    </View>

                </View>
                
                <Text style={{color: 'grey'}}> {zoneType}: {zoneText}</Text>
 
                <Pressable 
                style={styles.tourButton} 
                onPress={() => setZoneModalVisible(false)}
                >
                    <Text style={{color: 'white', fontWeight: 'bold'}}>OK</Text>
                </Pressable>

                
            </View>
        </Modal>
    </GestureRecognizer>
    )
}

const styles = StyleSheet.create({
    modalContainer: {
        width: '100%',
        height: '100%',
        flex: 1,
    },

    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
        marginTop: 30
    },

    swipeButton: {
        width: '25%',
        height: 5,
        backgroundColor: 'lightgrey',
        borderRadius: 25
    },

    textContainer: {
        width: '45%',
        marginBottom: 10,
    },

    modalMessage: {
        backgroundColor: 'white',
        width: '100%',
        height: '25%',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingTop: 10,
        borderTopLeftRadius: 25,
        borderTopRightRadius: 25
    },

    scooterTitle: {
        fontWeight: 'bold',
        marginBottom: 10,
        fontSize: 16
    },
    
    battery: {
        marginLeft: 5,
    },

    scooterImage: {
        margin: 10
    },

    tourButton: {
        backgroundColor: 'cornflowerblue',
        width: '80%',
        height: 50,
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10
    },
})

1			import React from "react";
2			import { useState, useEffect } from 'react';
3			import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
4			import GestureRecognizer from 'react-native-swipe-gestures';
5
6			export default function ZoneModal({navigation, zone, zoneModalVisible, setZoneModalVisible, currentCity}) {
7			const [zoneType, setZoneType] = useState(null);
8			const [taxRates, setTaxRates] = useState(null);
9			const [zoneText, setZoneText] = useState(null);
10
11
12
13			useEffect(() => {
14			function getZoneData() {
15			if (zone) {
16			setZoneType(zone['zoneType'])
17			setTaxRates(currentCity['taxRates'])
18
19			if (taxRates) {
20			if (taxRates[`${zoneType}Rate`] > 0) {
21			setZoneText(`Parking here will cost ${taxRates[`${zoneType}Rate`]}kr`)
22			} else {
23			setZoneText(`Park here to reduce ${taxRates[`${zoneType}Rate`]}kr from your trip`)
24			}
25			}
26
27			}
28			}
29			getZoneData();
30			});
31
32
33
34			return (
35			<GestureRecognizer
36			style={{flex: 1}}
37			onSwipeDown={ () => setZoneModalVisible(false) }
38			>
39			<Modal
40			animationType="slide"
41			transparent={true}
42			visible={zoneModalVisible}
43			onRequestClose={() => {
44			setZoneModalVisible(!zoneModalVisible)
45			}}
46
47			>
48			<View style={styles.modalContainer}></View>
49
50
51			<View style={styles.modalMessage}>
52			<View style={styles.swipeButton}></View>
53
54			<View style={styles.titleContainer}>
55			<View style={styles.textContainer}>
56			</View>
57
58			</View>
59
60			<Text style={{color: 'grey'}}> {zoneType}: {zoneText}</Text>
61
62			<Pressable
63			style={styles.tourButton}
64			onPress={() => setZoneModalVisible(false)}
65			>
66			<Text style={{color: 'white', fontWeight: 'bold'}}>OK</Text>
67			</Pressable>
68
69
70			</View>
71			</Modal>
72			</GestureRecognizer>
73			)
74			}
75
76			const styles = StyleSheet.create({
77			modalContainer: {
78			width: '100%',
79			height: '100%',
80			flex: 1,
81			},
82
83			titleContainer: {
84			flexDirection: 'row',
85			alignItems: 'center',
86			marginBottom: 10,
87			marginTop: 30
88			},
89
90			swipeButton: {
91			width: '25%',
92			height: 5,
93			backgroundColor: 'lightgrey',
94			borderRadius: 25
95			},
96
97			textContainer: {
98			width: '45%',
99			marginBottom: 10,
100			},
101
102			modalMessage: {
103			backgroundColor: 'white',
104			width: '100%',
105			height: '25%',
106			justifyContent: 'flex-start',
107			alignItems: 'center',
108			paddingTop: 10,
109			borderTopLeftRadius: 25,
110			borderTopRightRadius: 25
111			},
112
113			scooterTitle: {
114			fontWeight: 'bold',
115			marginBottom: 10,
116			fontSize: 16
117			},
118
119			battery: {
120			marginLeft: 5,
121			},
122
123			scooterImage: {
124			margin: 10
125			},
126
127			tourButton: {
128			backgroundColor: 'cornflowerblue',
129			width: '80%',
130			height: 50,
131			borderRadius: 25,
132			justifyContent: 'center',
133			alignItems: 'center',
134			marginTop: 10
135			},
136			})

FalkenDev / SparkRentals-Mobile-App

ZoneModal.tsx ➔ ZoneModal B last analyzed 2023-01-12 17:40 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

ZoneModal.tsx ➔ ZoneModal B
last analyzed 2023-01-12 17:40 UTC